<template>
  <div>
    <h1 align="center">员工模块01</h1>
    <!-- 查询 -->
    <el-form :inline="true" :model="query" class="demo-form-inline">
      <el-form-item label="员工名称">
        <el-input v-model="query.name" placeholder="员工名称" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="get">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 修改对话框 -->
    <el-dialog title="修改员工" :visible.sync="dialogVisible01"  width="30%">
      <el-form ref="form" :model="deprtment01" label-width="80px">
        <el-form-item label="员工名称">
          <el-input v-model="deprtment01.name" />
        </el-form-item>
        <el-form-item label="员工地址">
          <el-input v-model="deprtment01.address" />
        </el-form-item>
        <el-form-item label="员工手机">
          <el-input v-model="deprtment01.iphone" />
        </el-form-item>

        <el-form-item label="部门名称">
          <el-select v-model="deprtment01.personId" clearable placeholder="请输入部门名称">
            <el-option
              v-for="item in personList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="性别">
          <el-select v-model="deprtment01.sex" clearable placeholder="请选择性别">
            <el-option
              v-for="item in sexArrays"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible01 = false">取 消</el-button>
        <el-button type="primary" @click="update01">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 添加对话框 -->

    <div>
      <el-button type="primary" @click="dialogVisible = true">添加</el-button>
    </div>

    <el-dialog title="添加员工" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="deprtment" label-width="80px">
        <el-form-item label="员工名称">
          <el-input v-model="deprtment.name" />
        </el-form-item>
        <el-form-item label="员工地址">
          <el-input v-model="deprtment.address" />
        </el-form-item>
        <el-form-item label="员工手机">
          <el-input v-model="deprtment.iphone" />
        </el-form-item>
        <el-form-item prop="personId" label="部门名称">
          <el-select v-model="deprtment.personId"  multiple :multiple-limit="1" clearable placeholder="请输入部门名称">
            <el-option
              v-for="item in personList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="性别">
          <el-select v-model="deprtment.sex"  multiple :multiple-limit="1" clearable placeholder="请选择性别">
            <el-option label="男" value= 0 />
            <el-option label="女" value= 1 />
            <el-option label="未知" value= 2 />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">保 存</el-button>
      </span>
    </el-dialog>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" align="center" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="员工名称" width="180" align="center">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.name }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="员工地址" width="180" align="center">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.address }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="员工手机" width="180" align="center">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.iphone }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="typePerson" label="部门类型" width="180" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.typePerson == 1">技术类</span>
          <span v-if="scope.row.typePerson == 2">非技术类</span>
          <span v-if="scope.row.typePerson == 3">其他部门</span>
        </template>
      </el-table-column>

      <el-table-column label="部门名称" width="180" align="center">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.personName }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="sex" label="性别" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.sex == 0">男</span>
          <span v-if="scope.row.sex == 1">女</span>
          <span v-if="scope.row.sex == 2">未知</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        :current-page="query.page"
        :page-sizes="arr"
        :page-size="query.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
// 引入axios
import axios from 'axios'
export default {
  name: 'Dep01',
  data() {
    return {
      personList: [],
      count: 100,
      arr: [5, 10, 15, 20],
      // 查询数据模型
      query: {
        name: '',
        page: 0,
        size: 5
      },
      // 添加的模型数据
      deprtment: {
        // id:'',
        // name:""
      },
      deprtment01: {
        // id:'',
        // name:""
      },
      // 是否显示窗口
      // 添加的
      dialogVisible: false,
      // 修改的
      dialogVisible01: false,
      tableData: [],
      sexArrays: [
        { label: '男', value: 0 },
        { label: '女', value: 1 },
        { label: '未知', value: 2 }
      ]
      // personList: [
      // {id: "7", name: "开发部门"},
      // {id: "5", name: "财务部门"},
      // {id: "6", name: "其他部门"}
      // ]
    }
  },
  // vuez中生命周期钩子函数
  created() {
    this.query01(),
    this.query02()
  },
  methods: {

    handleSizeChange(val) {
      this.query.size = val
      this.query01()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.query.page = val
      this.query01()
      // console.log(`当前页: ${val}`);
    },
    // 编辑
    handleEdit(index, row) {
      // console.log(index, row);
      this.dialogVisible01 = true
      this.deprtment01 = row // 拿到回显数据
      console.log('+++++++２３４３４', this.deprtment01)
    },
    // 删除
    /**
          handleDelete(index, row) {
              axios.delete('http://127.0.0.1:9090/department/delete',{
                params: {
                  id: row.id
                }
              }).then((res) =>{
                this.query01();
              })
             console.log(index, row);
      },
      */
    // 删除
    handleDelete(index, row) {
      axios
        .delete('http://127.0.0.1:9090/department/' + row.id)
        .then((res) => {
          const result = res.data
          if (result.code === '200') {
            //  如果删除成功， 刷新员工列表
            this.query01()
            console.log(res)
          } else {
            console.error('Error deleting department:', result.msg)
          }
        })
        .catch((error) => {
          console.error('Error deleting department:', error)
        })
      //  console.log(index, row);
    },
    // 添加
    add() {
      axios
        .post('http://127.0.0.1:9090/department/add', this.deprtment)
        .then((res) => {
          const result = res.data
          // eslint-disable-next-line no-constant-condition
          if ((result.code = '200')) {
            this.dialogVisible = false
            this.query01()
            this.deprtment = {}
          } else {
            console.error('error adding deprtment:', result.msg)
          }
        })
        .catch((error) => {
          console.error('error adding deprtment:', error)
        })
    },
    // 修改
    update01() {
      axios
        .put('http://127.0.0.1:9090/department/update', this.deprtment01)
        .then((res) => {
          const result = res.data // msg code
          if (result.code === '200') {
            this.dialogVisible01 = false
            this.query01()
          } else {
            console.error('error update deprtment01', result.msg)
          }
        })
        .catch((error) => {
          console.error('error update deprtment01', error)
        })
    },
    // 查询
    query01() {
      axios
        .get('http://127.0.0.1:9090/department/page01', {
          params: {
            name: this.query.name,
            page: this.query.page,
            size: this.query.size
          }
        })
        .then((res) => {
          this.tableData = res.data.rows
          this.count = res.data.totalCount
          // console.log(res);
        })
        .catch((error) => {
          console.error('error page01 deprtment', error)
        })
    },

    /**
     *
     */
    // 查询PersonList
    query02() {
      axios
        .get('http://127.0.0.1:9090/person/PersonList')
        .then((res) => {
          console.log(res)
          this.personList = res.data.data
          console.log(this.personList)
          console.log('+++++++', this.personList)
          // console.log(PersonList)
        })
        .catch((error) => {
          console.error('error page01 deprtment', error)
        })
    },
    // 根据姓名查询
    get() {
      this.query01()
    }
  }
}
</script>

<style>
</style>
